import React, { useState, useEffect } from 'react'
import { Input, Menu, Avatar, Dropdown, message, Modal, Upload } from 'antd';
import { UserOutlined, DownOutlined, UserSwitchOutlined, IdcardOutlined, FormOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import "../style/head.scss"
import { useNavigate } from 'react-router-dom';
import { A11y, EffectFade, Autoplay } from 'swiper';
import { Swiper, SwiperSlide, } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/autoplay'
import 'swiper/css/effect-fade';

// const getBase64 = (img: any, callback: any)=> {
//     const reader = new FileReader();
//     reader.addEventListener('load', () => callback(reader.result));
//     reader.readAsDataURL(img);
//     console.log(reader);
// }

// const beforeUpload = (file: any)=> {
//     const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
//     if (!isJpgOrPng) {
//         message.error('只支持上传png和jpeg');
//     }

//     const isLt2M = file.size / 1024 / 1024 < 2;
//     if (!isLt2M) {
//         message.error('超过2m不支持上传');
//     }
//     return isJpgOrPng && isLt2M;
// }

// const AvatarS = () => {

//     const [loading, setLoading] = useState(false);
//     const [imageUrl, setImageUrl] = useState();
//     const handleChange = (info: any) => {
//         if (info.file.status === 'uploading') {
//             setLoading(true)
//             return;
//         }
//         if (info.file.status === 'done') {
//             // Get this url from response in real world.
//             getBase64(info.file.originFileObj, (imageUrl: any) => {
//                 setLoading(false),
//                 setImageUrl(imageUrl)
//             }
//             );
//         }
//     };

//     const uploadButton = (
//         <div>
//             {loading ? <LoadingOutlined /> : <PlusOutlined />}
//             <div style={{ marginTop: 8 }}>Upload</div>
//         </div>
//     );
//     return (
//         <Upload
//             name="avatar"
//             listType="picture-card"
//             className="avatar-uploader"
//             showUploadList={false}
//             action="http://localhost:4000/api/getavatar"
//             beforeUpload={beforeUpload}
//             onChange={handleChange}
//         >
//             {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
//         </Upload>
//     );

// }


const role = () => {

    switch (JSON.parse(localStorage.getItem("DeskUser") || "0").role) {
        case 1:
            return "正式员工"
        case 2:
            return "门店经理"
        case 3:
            return "区域经理"
        case 4:
            return "总部经理"
    }
}

const Slideshow = () => {
    useEffect(() => {


    }, [])
    const imgS = [
        {
            img: "https://cdn.bestseller.com.cn/assets/memberImage/ONLY/ONLYDA00568984-1646211811178.jpg"
        },
        {
            img: "https://cdn.bestseller.com.cn/assets/memberImage/ONLY/nullnull-1642495356439.jpg"
        },
        {
            img: "https://cdn.bestseller.com.cn/assets/memberImage/ONLY/ONLYDA00568984-1648178596224.jpg"
        },
        {
            img: "https://cdn.bestseller.com.cn/assets/memberImage/ONLY/ONLYDA00568984-1641464450660.jpg"
        },
    ]

    return (
        <Swiper
            modules={[A11y, EffectFade, Autoplay]}
            spaceBetween={1}
            slidesPerView={1}
            effect="fade"
            autoplay={true}
            style={{ width: "70%", height: "100%", marginLeft: 70 }}
            onSlideChange={() => console.log('slide change')}
            onSwiper={(swiper) => console.log(swiper)}
        >
            {
                imgS.map((item: any, index) => {
                    return (
                        <SwiperSlide key={index}>
                            <img src={item.img} style={{ height: "100%" }} />
                        </SwiperSlide>
                    )
                })
            }


        </Swiper>
    )
}

export const Head = ({ DeskUser }: any) => {
    const { Search } = Input;
    const [modal2Visible, setModal2Visible] = useState(false)
    const navigate = useNavigate()
    const onSearch = (value: String) => {
        console.log(value);
    }
    const onClick = ({ key }: any) => {
        console.log(key);

        switch (key) {
            case "3":
                setModal2Visible(true);
                break;
        }
    };
    const quit = () => {
        setModal2Visible(false);
        localStorage.removeItem("DeskUser");
        navigate("/login");
    }
    const menu = (
        <Menu onClick={onClick}>
            <Menu.Item key="1"> <IdcardOutlined /> {role()}</Menu.Item>
            <Menu.Item key="2"> <FormOutlined /> 修改资料</Menu.Item>
            <Menu.Item key="3"><UserSwitchOutlined />   登出</Menu.Item>
        </Menu>
    );
    return (
        <div className='head-flex'>
            <Slideshow />
            <div style={{ flex: "1", display: "flex", justifyContent: "right", alignItems: "center" }}>
                <Avatar size={45} className="shadow-drop-2-center" icon={<UserOutlined />} src="https://img2.baidu.com/it/u=589425264,2114516623&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
                </Avatar>
                <span> </span>
                <Dropdown overlay={menu} >
                    <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                        Hover me {DeskUser.name}    <DownOutlined />
                    </a>
                </Dropdown>

            </div>
            <Modal
                title="温馨提示"
                centered
                visible={modal2Visible}
                onOk={quit}
                onCancel={() => setModal2Visible(false)}
            >
                <p>您确定要退出登录吗...</p>
            </Modal>
        </div>
    )
}
